<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="素材中心" placeholder bgColor="#fff"></u-navbar>
    <view class="tabs">
      <u-tabs
        :list="tabsList"
        :current="tabsIndex"
        lineColor="#53BE07"
        lineWidth="60rpx"
        inactiveStyle="color: #313131;"
        activeStyle="color: #53BE07;"
        @change="tabsChange"
      >
      </u-tabs>
    </view>
    <enterpriseInfo v-if="tabsIndex === 0"></enterpriseInfo>
    <brochure v-if="tabsIndex === 1"></brochure>
    <marketingSoftArticles v-if="tabsIndex === 2"></marketingSoftArticles>
    <marketingVideo v-if="tabsIndex === 3"></marketingVideo>
    <commonDocuments v-if="tabsIndex === 4"></commonDocuments>
    <promotionPoster v-if="tabsIndex === 5"></promotionPoster>
    <imageMaterials v-if="tabsIndex === 6"></imageMaterials>
    <postingCircleMaterials v-if="tabsIndex === 7"></postingCircleMaterials>
  </view>
</template>

<script>
import enterpriseInfo from './materialCenter/enterpriseInfo.vue';
import brochure from './materialCenter/brochure.vue';
import marketingSoftArticles from './materialCenter/marketingSoftArticles.vue';
import commonDocuments from './materialCenter/commonDocuments.vue';
import promotionPoster from './materialCenter/promotionPoster.vue';
import marketingVideo from './materialCenter/marketingVideo.vue';
import postingCircleMaterials from './materialCenter/postingCircleMaterials.vue';
import imageMaterials from './materialCenter/imageMaterials.vue';

export default {
  components: {
    enterpriseInfo,
    brochure,
    marketingSoftArticles,
    commonDocuments,
    promotionPoster,
    marketingVideo,
    postingCircleMaterials,
    imageMaterials,
  },
  data() {
    return {
      tabsIndex: 0,
      tabsList: [
        {
          name: '企业介绍',
        },
        {
          name: '宣传彩页',
        },
        {
          name: '营销软文',
        },
        {
          name: '营销视频',
        },
        {
          name: '常用文档',
        },
        {
          name: '推广海报',
        },
        {
          name: '图片素材',
        },
        {
          name: '发圈素材',
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    tabsChange(e) {
      this.tabsIndex = e.index
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .tabs {
    margin: 12rpx 0;
    width: 100%;
    padding: 10rpx 20rpx 16rpx;
    background: #FFFFFF;
  }
}
</style>
